<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flat UI</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Loading Bootstrap -->
  <link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">

  <!-- Loading Flat UI -->
  <link href="{{STATIC_URL}}css/login.css" rel="stylesheet">
  <link rel="shortcut icon" href="{{STATIC_URL}}images/favicon.ico">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <![endif]-->
    </head>
    <body>
      <div class="container">
        <div class="row"><img class="logo" src="{{STATIC_URL}}images/logo.png"/></div>
        <div class="login">
          <div class="login-screen">
            <div class="login-icon">
              <img src="{{STATIC_URL}}images/login/icon.png" alt="Welcome to SQFlight Administration" />
              <h4>Welcome to <small>SQFlight Administration</small></h4>
            </div>

            <form action="login" method="POST" id="form">{% csrf_token %}
              <div class="login-form">
                <div>{{message}}</div>
                <div class="control-group">
                  <input name="username" type="text" class="login-field" value="" placeholder="Username" id="username" />
                  <label class="login-field-icon fui-man-16" for="login-name"></label>
                </div>

                <div class="control-group">
                  <input name="password" type="password" class="login-field" value="" placeholder="Password" id="pass" />
                  <label class="login-field-icon fui-lock-16" for="login-pass"></label>
                </div>

                <a id="login-btn" class="btn btn-primary btn-large btn-block" href="#">Login</a>
              </form>
              <a class="login-link" href="#">Lost your password?</a>
            </div>
          </div>
        </div>
      </div> <!-- /container -->

      <footer>
        <div class="container">
          <div class="row">
            <div class="span7">
              <h3 class="footer-title">SQFlight is distributed under GPL v3 License</h3>
            </div> <!-- /span8 -->

            <div class="span6">
              <div class="footer-banner">
                <h3 class="footer-title"><img class="logo2" src="{{STATIC_URL}}images/logo2.png"> SQLite Administrator</h3>
              </div>
            </div>
          </div>
        </div>
      </footer>

      <!-- Load JS here for greater good =============================-->
      <script src="{{STATIC_URL}}js/vendor/jquery-1.8.2.min.js"></script>
      <script src="{{STATIC_URL}}js/vendor/jquery-ui-1.10.0.custom.min.js"></script>
      <script src="{{STATIC_URL}}js/vendor/bootstrap-tooltip.js"></script>
      <script src="{{STATIC_URL}}js/vendor/jquery.placeholder.js"></script>
      <script src="{{STATIC_URL}}js/controller/login.js"></script>
    <!--[if lt IE 8]>
      <script src="js/icon-font-ie7.js"></script>
      <script src="js/icon-font-ie7-24.js"></script>
      <![endif]-->
    </body>
    </html>
